<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view>
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		<!-- 自定义导航栏 -->
		<u-navbar title="线路选择">
			<view slot="right" style="margin-right: 20rpx;" @click="mapSelect">
				<u-icon size="40" name="map"></u-icon>
			</view>
		</u-navbar>
		<!-- 联动列表 -->
		<view class="list_box" style="font-size: 38rpx;" v-if="!isShowList">
			<!-- 左边的列表 -->
			<view class="left">
				<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
					<view class="item" style="font-size: 38rpx;" v-for="(item,index) in stationArray" :key="index"
						:class="{ 'active':index==leftIndex }" :data-index="index" @click="leftClick">
						{{item.CountyName}}</view>
				</scroll-view> 
			</view>
			<!-- 右边的列表 -->
			<view class="main" v-if="!isShowList">
				<swiper class="swiper" :style="{ 'height':scrollHeightA }" :current="leftIndex" @change="swiperChange"
					vertical="true" duration="300">
					<swiper-item v-for="(item,index) in stationArray" :key="index">
						<scroll-view scroll-y="true" :style="{ 'height':scrollHeightA }">
							<view class="item">
								<view class="goods" v-for="(item2,index2) in item.Lines" :key="index2"
									@click="detailStationClick(item2)">
									<view>
										<view>{{item2.LineName}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				keyword: '',
				showAction: true,
				scrollHeight: '500px',
				scrollHeightA: '400px',
				isShowList: false, //是否显示站点列表
				keywordList: [],
				stationArray: [],
				mainArray: [],
				leftIndex: 0,
				fontSize: '',
				stationType: '', 
				haveKeyWord: false,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				navbarHeight: 44,
				userInfo: [],
				PhoneNumber :''
			}
		},
		onLoad(params) {
			_self = this;
			_self.stationType = params.stationType;
			_self.fontSize = getApp().globalData.fontSize;
			//判断用户是否登陆
			_self.judgeUserInfo();
			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					_self.scrollHeight = `${res.windowHeight-100}px`;
					_self.scrollHeightA = `${res.windowHeight-100}px`;
				}
			});
			_self.GetSiteNameByCode();
		},
		methods: {
			customClick() {
				console.log('点击了自定义按钮');
			},
			//--------------------------------------------地图选点--------------------------------------------
			mapSelect: function() {
				// uni.navigateTo({
				// 	url:'../mapPoint/mapPointPicker'
				// })
				_self.showtoast('功能暂未开放', 'warning');
			},
			
			//--------------------------------------------左侧导航点击--------------------------------------------
			leftClick(e) {
				let index = e.currentTarget.dataset.index;
				_self.leftIndex = Number(index);

			},
			/* 切换 */
			swiperChange(e) {
				let index = e.detail.current;
				_self.leftIndex = Number(index);
			},
			//--------------------------------------------点击右边站点--------------------------------------------
			detailStationClick(item) {
				
				console.log('132456',item);
				_self.GetOperationLog(item);
				_self.GetLoadByStartAndEndSite(item.LineID)
				// uni.$emit('townshipLineNameChange', {
				// 	lineName: item.LineName,
				// 	startStation:item.StartStation,
				// 	endStation: item.EndStation,
				// 	lineID:item.LineID,
				// });

				// uni.navigateBack();
			},
			//-------------------------------------------判断用户是否登陆-------------------------------------------
			judgeUserInfo: function() {
				console.log(123);
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						_self.userInfo = res.data;
						if (res.data.PhoneNumber) {
							_self.PhoneNumber = res.data.PhoneNumber;
						}
					},
					fail: function() {
						// #ifdef APP
						uni.navigateTo({
							url: '../../pages/Login/Login'
						});
						// #endif
						// #ifdef MP-WEIXIN
						uni.$emit('getAuthorize', {
							data: '授权'
						});
						// #endif
			
					}
				})
			},
			//根据出发到达地查询开通线路
			GetLoadByStartAndEndSite(selectLineID) {
				let that = this;
				uni.request({
					url: that.$h.expressInterface.expressInterface.GetLoadByStartAndEndSite.url,
					method: that.$h.expressInterface.expressInterface.GetLoadByStartAndEndSite.method,
					header: that.$h.expressInterface.expressInterface.GetLoadByStartAndEndSite.header,
					data: {
						lineID: selectLineID,
					},
					success: (res) => {
						console.log(JSON.parse(res.data), '查询开通线路')
						let data = JSON.parse(res.data)
						if (data.IsSuccess) {
							uni.navigateTo({
								url: '/pages_IntercityExpress/townshipTransport/townshipDetail1?LineID=' +
									selectLineID + '&lineSites=' + JSON.stringify(data.Data
										.lineSites) + '&setoutTimes=' + JSON.stringify(data.Data
										.setoutTimes) +
									'&LineName=' + data.Data.schedule.LineName + '&scheduleID=' + data
									.Data.schedule.AID
							})
						} else {
							uni.showToast({
								title: '暂无开通线路',
								icon: 'error'
							})
						}
					},
					fail(res) {
						console.log(res)
					}
				})
			},
			//--------------------------------------记录用户操作--------------------------------------
			GetOperationLog: function(item) {
				var ScheduleLength = 0;
				uni.request({
					url: _self.$h.expressInterface.expressInterface.GetOperationLog.url,
					method: _self.$h.expressInterface.expressInterface.GetOperationLog.method,
					header: _self.$h.expressInterface.expressInterface.GetOperationLog.header,
					data: {
						StartSiteName: item.StartStation, //起点
						EndSiteName: item.EndStation, //终点
						PhoneNumber: _self.PhoneNumber || '', //用户手机号
						BookType: '乡镇客运', //下单类型：城际快车、汽车票
						ExecuteDate: '', //选择班次的日期
						ScheduleLength: ScheduleLength, //返回班次的长度
						appSystemCode: _self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode,
					},
					success: (res) => {
						// console.log('记录乘客操作返回数据', res);
					},
					fail(res) {
						// console.log('记录乘客操作返回数据', res);
					}
				});
			},
			//--------------------------------------------加载站点数据--------------------------------------------
			GetSiteNameByCode: function() {
				uni.showLoading({
					title: '正在加载...'
				})
				uni.request({
					url: _self.$h.expressInterface.expressInterface.GetTownshipLineInfo.url,
					method: _self.$h.expressInterface.expressInterface.GetTownshipLineInfo.method,
					header: _self.$h.expressInterface.expressInterface.GetTownshipLineInfo.header,
					data: {
						//appSystemCode: _self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode
						lineType: 2
					},
					success: (res) => {
						uni.hideLoading();
						// var stationArr = [];
						 let data=JSON.parse(res.data)
						 console.log('data',data)
						if (data.IsSuccess) {
							if (data.Data) {
								_self.stationArray = data.Data[0].Countys;
							}
						}
					},
					fail(res) {
						console.log(res)
						uni.hideLoading();
					}
				});
				uni.showToast({
					title: '请通过列表选择线路',
					icon: 'loading'
				})
			},
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 38rpx;
	}

	//站点列表
	.stationList {
		margin-top: 10rpx;
		background-color: #FFFFFF;
		line-height: 80rpx;
		box-sizing: border-box;
		height: 100rpx;

		.listItem {
			margin-left: 20rpx;
			border-bottom: 1rpx solid #eeeeee;
		}
	}

	.list_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			text-align: center;

			.item {
				padding-left: 20rpx;
				position: relative;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						//如果这里使用绝对定位的话会出现第一次点击左边的列表之后左边的列表会消失
						// position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active,
				&:active {
					color: #42b983;
					background-color: #fff;
				}
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.swiper {
				height: 500px;
			}


			.item {
				padding-bottom: 10rpx;
			}
		}

		.goods {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-bottom: 10rpx;
			border-bottom: 1rpx solid #eeeeee;
			line-height: 80rpx;
		}
	}
</style>
